<template>
  <div class="tab">
    <ul>
        <li v-for="(item,index) in tabList" :key="index" :class="{active:$store.state.checkTxt == item.val}" @click="cut(item.val)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from 'vuex';
export default {
  setup(props,{emit}) {
    const { commit,state } = useStore();
    const data = reactive({
      tabList: [
        {
          name: "全部",
          val: "",
        },
        {
          name: "精华",
          val: "good",
        },
        {
          name: "分享",
          val: "share",
        },
        {
          name: "问答",
          val: "ask",
        },
        {
          name: "招聘",
          val: "job",
        },
        {
          name: "客户端测试",
          val: "kehu",
        },
      ],
    });
    
    const cut = (val) => {
       commit('storeCut',val);
       emit('cut',val);
    }
    // if (state.checkIndex){
    //  setTimeout(() => {
    //     cut(state.checkIndex,data.tabList[state.checkIndex].val)
    //  }, 1000);
    // }
    
    return {
      ...toRefs(data),
      cut
    }
  },
};
</script>
<style lang="scss" scoped>
  ul{
    display: flex;
    align-items: center;
    padding: 10px 15px;
    flex-wrap: wrap;
    background: #f6f6f6;
    li{
      padding: 4px 8px;
      font-size: 14px;
      color: #82b400;
    }
    .active{
      background: #82b400;
      color: #fff;
    }
  }
</style>